<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <!--    查询功能-->
        <div class="center">
            <div class="profile">
                <el-date-picker class="queryInp date-picker" v-model="queryData.date" :clearable="false"
                    @change="handleDateChange" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions" prefix-icon="el-icon-date" />
                <el-select v-model="joint" class="session-select" placeholder="全部节次" @change="changeSelect">
                    <el-option v-for="item in jointNum" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" style="margin-left: 5px; height: 31.5px" icon="el-icon-search"
                    @click="select">查询</el-button>
            </div>

        </div>

        <el-table :data="formDatas" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
            <el-table-column prop="classroom" label="教室名称"></el-table-column>
            <el-table-column label="节次">
                <template slot-scope="scope">
                    <span>{{ formatSession(scope.row.session) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination v-show="queryData.total > 0" :total="queryData.total" :page.sync="queryData.pageNum"
            :limit.sync="queryData.pageSize" class="list-pagination" />
    </div>
</template>

<script>
import { getEmptyCourseList } from "@/api/classroomReservation.js"

export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    const now = new Date()
                    const currentDay = now.getDay()
                    if (currentDay === 6) now.setDate(now.getDate() + 2)
                    else if (currentDay === 0) now.setDate(now.getDate() + 1)
                    return time < now.setHours(0, 0, 0, 0)
                }
            },
            queryData: {
                date: "",
                classStart: "",
                classEnd: "",
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            jointNum: [
                { label: "全部节次", value: "" },
                { label: "1-2节", value: "1-2" },
                { label: "3-4节", value: "3-4" },
                { label: "5-6节", value: "5-6" },
                { label: "7-8节", value: "7-8" },
                { label: "9-10节", value: "9-10" },
                { label: "11-12节", value: "11-12" }
            ],
            joint: "",
            formData: []
        }
    },
    computed: {
        formDatas() {
            return this.formData.slice(
                (this.queryData.pageNum - 1) * this.queryData.pageSize,
                this.queryData.pageNum * this.queryData.pageSize
            )
        }
    },
    async created() {
        this.queryData.date = this.getDefaultDate()
        this.getAvailableList()
    },
    methods: {
        handleDateChange(value) {
            if (!value) this.queryData.date = this.getDefaultDate()
        },
        // 获取默认日期
        getDefaultDate() {
            const now = new Date();
            const currentDay = now.getDay(); // 0（周日）到 6（周六）

            // 如果是周六或周日，计算下周一的日期
            if (currentDay === 6) {
                now.setDate(now.getDate() + 2);
            } else if (currentDay === 0) {
                now.setDate(now.getDate() + 1);
            }

            // 格式化日期为 YYYY-MM-DD，确保月和日是两位数
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
            const day = String(now.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        },
        select() {
            this.queryData.pageNum = 1
            this.getAvailableList()
        },
        // 获取可预约列表
        async getAvailableList() {
            try {
                const res = await getEmptyCourseList(this.queryData)
                this.formData = res.availableCourses
                this.queryData.total = this.formData.length
            } catch (error) {
                console.error("获取空闲教室失败:", error)
            }
        },
        // 处理节次选择
        changeSelect(val) {
            if (val) {
                const [start, end] = val.split("-")
                this.queryData.classStart = start
                this.queryData.classEnd = end
            } else {
                this.queryData.classStart = ""
                this.queryData.classEnd = ""
            }
        },
        // 格式化节次显示
        formatSession(session) {
            return session?.replace(/[一二三四五六七日[\]]/g, '').replace(',', ' - ') || ''
        }
    }
}
</script>

<style scoped>
.center{
    margin-bottom: 5px;
}
.queryInp {
    width: 200px;
    margin-right: 5px;
}
</style>